﻿@page "/app/user/view"
@page "/app/user/view/{Id}"
@inherits ProCompontentBase

<MRow>
    <MCol Md="8">
        <MCard Height="298" class="pt-2 pb-2">
            <MCardText>
                <MRow>
                    <MCol Cols="@("auto")">
                        <div style="width:300px;" class="text-center">
                            @if (string.IsNullOrEmpty(UserData.HeadImg))
                            {
                                string color = UserData.Color;
                                <MAvatar Size="120" Color="@($"{color}-lighten-5")">
                                    <span class="@($"{color}--text text-h3")">@UserData.SampleName</span>
                                </MAvatar>
                            }
                            else
                            {
                                <MAvatar Size="120">
                                    <MImage Contain Src="@UserData.HeadImg" />
                                </MAvatar>
                            }
                            <h5 class="mt-1">@UserData.FullName</h5>
                            <span class="mt-1 text-caption">@UserData.Email</span>
                            <MRow NoGutters class="mt-4">
                                <MCol Md="6" class="text-center">
                                    <h5>@UserData.Sales</h5>
                                    <span class="text-body2">Monthly Sales</span>
                                </MCol>
                                <MCol Md="6" class="text-center">
                                    <h5>@UserData.Profit</h5>
                                    <span class="text-body2">Annual Profit</span>
                                </MCol>
                            </MRow>
                        </div>
                    </MCol>
                    <MDivider Vertical />
                    <MCol class="ml-3 d-flex flex-column">
                        <div class="mb-3 d-flex justify-space-between">
                            <span class="text-body2 neutral-lighten-1--text">
                                <MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-account-outline</MIcon>Username
                            </span>
                            <span class="text-caption">@UserData.UserName</span>
                        </div>
                        <div class="mb-3 d-flex justify-space-between">
                            <span class="text-body2 neutral-lighten-1--text">
                                <MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-check</MIcon>Status
                            </span>
                            <span class="text-caption">@UserData.Status</span>
                        </div>
                        <div class="mb-3 d-flex justify-space-between">
                            <span class="text-body2 neutral-lighten-1--text">
                                <MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-star-outline</MIcon>Role
                            </span>
                            <span class="text-caption">@UserData.Role</span>
                        </div>
                        <div class="mb-3 d-flex justify-space-between">
                            <span class="text-body2 neutral-lighten-1--text">
                                <MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-flag-outline</MIcon>Country
                            </span>
                            <span class="text-caption">@UserData.Country</span>
                        </div>
                        <div class="mb-3 d-flex justify-space-between">
                            <span class="text-body2 neutral-lighten-1--text">
                                <MIcon Small class="mr-2" Color="neutral-lighten-1">mdi-phone-outline</MIcon>Contact
                            </span>
                            <span class="text-caption">@UserData.Contact</span>
                        </div>
                        <div class="flex-grow-1 d-flex align-end">
                            <MButton MinWidth="100" class="primary rounded-pill">Edit</MButton>
                            <MButton Outlined MinWidth="100" Color="red" class="ml-6 rounded-pill">Delete</MButton>
                        </div>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Md="4">
        <MCard class="pa-2 fill-height d-flex flex-column justify-space-between">
            <MCardText>
                <div class="d-flex justify-space-between">
                    <h6>Current Plan</h6>
                    <MChip Small class="sample-green--text lighten-green"> @UserData.Plan </MChip>
                </div>
                <span class="mt-1 neutral-lighten-4--text">July 22, 2021</span>
                <div class="mt-6 d-flex flex-column text-body2 neutral-lighten-1--text">
                    <span>5 Users</span>
                    <span class="mt-3">10 GB storage</span>
                    <span class="mt-3">Basic Support</span>
                </div>
            </MCardText>
            <MCardActions class="d-flex justify-center">
                <MButton Width="340" class="primary text-capitalize rounded-pill">Upgrade Plan</MButton>
            </MCardActions>
        </MCard>
    </MCol>
</MRow>

<MRow class="mt-6">
    <MCol Md="8">
        <MCard>
            <MCardTitle>
                <MIcon Size=20 Color="sample-green" Class="mr-1">mdi-lock-open-outline</MIcon>
                <span class="text-h6">Permission</span>
            </MCardTitle>
            <MCardSubtitle class="ml-6 text-btn neutral-lighten-4--text">
                Permission according to roles
            </MCardSubtitle>
            <MCardText>
                <MDataTable HideDefaultFooter Headers="_headers" TItem="PermissionDto" Items="_permissions"
                    ItemKey="r=>r.Module" Class="table-header-fill table-border-solid">
                    <HeaderColContent Context="header">
                        <span class="text-body neutral-lighten-1--text">@header.Text</span>
                    </HeaderColContent>
                    <ItemColContent>
                        @switch (context.Header.Value)
                        {
                            case nameof(PermissionDto.Module):
                                <span class="text-body neutral-lighten-2--text">@context.Value</span>
                                break;
                            case nameof(PermissionDto.Read):
                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Read"></MCheckbox>
                                break;
                            case nameof(PermissionDto.Write):
                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Write"></MCheckbox>
                                break;
                            case nameof(PermissionDto.Create):
                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Create"></MCheckbox>
                                break;
                            case nameof(PermissionDto.Delete):
                                <MCheckbox Class="mt-0" Color="primary" @bind-Value="context.Item.Delete"></MCheckbox>
                                break;
                            default:
                                @context.Value
                                break;
                        }
                    </ItemColContent>
                </MDataTable>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Md="4">
        <MCard class="pa-2">
            <MCardTitle class="text-h8">
                User Timeline
            </MCardTitle>
            <MCardText>
                <MTimeline Dense class="mr-n2 ml-n10 pro-timeline-before divider-align-start m-timeline-flat">
                    <MTimelineItem Class="mt-0" Small Color="transparent">
                        <IconContent>
                            <MIcon class="sample-green--text">mdi-adjust</MIcon>
                        </IconContent>
                        <ChildContent>
                            <div class="d-flex justify-space-between align-center">
                                <span class="text-body">
                                    12 Invoices have been paid
                                </span>
                                <span class="neutral-lighten-4--text">
                                    12 min ago
                                </span>
                            </div>
                            <span class="text-body2 mt-1">
                                Invoices have been paid to the company.
                            </span>
                            <p class="mt-4 mb-0 d-flex align-center">
                                <img class="mr-1" width="20"
                                    src="" />
                                <span class="ml-2 neutral-lighten-2--text">invoice.pdf</span>
                            </p>
                        </ChildContent>
                    </MTimelineItem>
                    <MTimelineItem Class="mb-4" Small Color="transparent">
                        <IconContent>
                            <MIcon class="error--text">mdi-adjust</MIcon>
                        </IconContent>
                        <ChildContent>
                            <div class="d-flex justify-space-between align-center">
                                <span class="text-body">
                                    Client Meeting
                                </span>
                                <span class="neutral-lighten-4--text">
                                    45 min ago
                                </span>
                            </div>
                            <span class="text-body2 mt-1">
                                Project meeting with john @@10:15am.
                            </span>
                            <MListItem class="grow mt-4 pa-0">
                                <MListItemAvatar class="pa-0">
                                    <MImage Src="/img/avatar/10.svg">
                                    </MImage>
                                </MListItemAvatar>
                                <MListItemContent>
                                    <MListItemTitle class="neutral-lighten-1--text">John Doe (Client)</MListItemTitle>
                                    <MListItemSubtitle class="neutral-lighten-2--text">CEO of Infibeam
                                    </MListItemSubtitle>
                                </MListItemContent>
                            </MListItem>
                        </ChildContent>
                    </MTimelineItem>

                    <MTimelineItem Class="mb-4" Color="transparent" Small>
                        <IconContent>
                            <MIcon class="dark-yellow--text">mdi-adjust</MIcon>
                        </IconContent>
                        <ChildContent>
                            <div class="d-flex justify-space-between align-center">
                                <span class="text-body">
                                    Create a new project for client
                                </span>
                                <span class="neutral-lighten-4--text">
                                    2 days ago
                                </span>
                            </div>
                            <span class="text-body2 mt-1">
                                Add files to new design folder
                            </span>
                        </ChildContent>
                    </MTimelineItem>
                </MTimeline>
            </MCardText>
        </MCard>
    </MCol>
</MRow>

<Masa.Maui.Pages.App.Invoice.Components.InvoiceList />

@code {
    private List<DataTableHeader<PermissionDto>> _headers = new List<DataTableHeader<PermissionDto>>
{
new (){ Text= "MODULE", Sortable= false, Value= nameof(PermissionDto.Module)},
new (){ Text= "READ", Sortable= false, Value= nameof(PermissionDto.Read),Align="center"},
new (){ Text= "WRITE", Sortable= false, Value= nameof(PermissionDto.Write),Align="center"},
new (){ Text= "CREATE", Sortable= false, Value= nameof(PermissionDto.Create),Align="center"},
new (){ Text= "DELETE", Sortable= false, Value= nameof(PermissionDto.Delete),Align="center"}
};
    private List<PermissionDto> _permissions = UserService.GetPermissionsList();
    private UserDto? _userData;

    [Parameter]
    public string? Id { get; set; }

    [AllowNull]
    public UserDto UserData
    {
        get
        {
            return _userData ?? UserService.GetList().First();
        }
        set
        {
            _userData = value;
        }
    }

    protected override void OnParametersSet()
    {
        UserData = UserService.GetList().FirstOrDefault(u => u.Id == Id);
    }
}